<template>
  <div class="app">
    <!-- 使用封装的顶部导航栏组件 -->
    <AppHeader function-name="智能AI助手" theme="blue" ></AppHeader>
    <div class="app-container">
      <!-- 左侧边栏 -->
      <div class="sidebar">
        <!-- AI信息区 -->
        <div class="ai-info">
          <img src="@/assets/images/ai-avatar.png" alt="AI Logo" class="ai-logo">
          <h2 class="ai-name">智能助手</h2>
        </div>

      <!-- 新建对话按钮 -->
      <button class="new-chat-btn" @click="createNewChat">
        <span class="plus-icon">+</span> 新建对话
      </button>

      <!-- 历史对话列表 -->
      <div class="session-list">
        <div v-for="(session, index) in chatSessionList" :key="index"
          :class="['session-item', { active: currrntChatSession.sessionId == session.sessionId }]"
          @click="handleChatSession(session)">
          <div class="session-item-content">
            <!-- 编辑状态 -->
            <template v-if="editingChatId == session.sessionId">
              <el-input ref="editInput" v-model="session.title" size="small" @blur="editChatSession"
                @keyup.enter="editChatSession" @keyup.esc="cancelEdit" autofocus @click.stop />
            </template>
            <!-- 非编辑状态 -->
            <template v-else>
              <span class="chat-title">{{ session.title }}</span>
            </template>
          </div>
          <div class="more-options">
            <el-popover placement="right-start" trigger="click" :width="100" popper-class="chat-popover">
              <template #reference>
                <span class="more-icon">
                  <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                    <path
                      d="M512 341.33a85.33 85.33 0 1 0 0-170.67 85.33 85.33 0 0 0 0 170.67zM512 597.33a85.33 85.33 0 1 0 0-170.67 85.33 85.33 0 0 0 0 170.67zM512 853.33a85.33 85.33 0 1 0 0-170.67 85.33 85.33 0 0 0 0 170.67z"
                      fill="#8c8c8c" />
                  </svg>
                </span>
              </template>
              <div class="popover-content">
                <div class="popover-item" @click.stop="handleEdit(session)">
                  <span>修改名称</span>
                </div>
                <div class="popover-item" @click.stop="handleDelete(session)">
                  <span>删除对话</span>
                </div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>

    <!-- 聊天区域 -->
    <div class="chat-container">
      <!-- 聊天历史记录 -->
      <div class="chat-session" ref="chatSessionRef">
        <div v-for="(msg, index) in messages" :key="index"
          :class="['message-wrapper', msg.role === 'user' ? 'user-wrapper' : 'ai-wrapper']">
          <!-- 用户消息显示在右侧 -->
          <template v-if="msg.role == 'user'">
            <div class="spacer"></div>
            <div class="message-box user-message-box">
              <div class="message-header">
                <span class="message-time">{{ msg.createTime }}</span>
                <span class="sender-name">您</span>
              </div>
              <div class="message-content user-message">
                <MdPreview :modelValue="msg.content" />
              </div>
            </div>
            <div class="avatar-container">
              <img :src="userAvatar" alt="用户头像" class="avatar">
            </div>
          </template>

          <!-- AI消息显示在左侧 -->
          <template v-else-if="msg.role == 'assistant'">
            <div class="avatar-container">
              <img :src="aiAvatar" alt="AI头像" class="avatar">
            </div>
            <div class="message-box">
              <div class="message-header">
                <span class="sender-name">智能助手</span>
                <span class="message-time">{{ msg.createTime }}</span>
              </div>

              <!-- AI消息的思考区域 - 只在有思考内容时显示 -->
              <div v-if="msg.reasoning.trim()" class="reasoning-container">
                <div class="reasoning-header" @click="toggleReasoning(index)">
                  <span class="reasoning-title">{{ msg.remark }}</span>
                  <svg :class="['arrow-icon', { 'arrow-down': !msg.showReasoning }]" viewBox="0 0 1024 1024" width="12"
                    height="12">
                    <path d="M512 714.667l-448-448 64-64 384 384 384-384 64 64z" fill="#8c8c8c" />
                  </svg>
                </div>
                <div v-show="msg.showReasoning" class="reasoning-content">
                  <MdPreview :modelValue="msg.reasoning" />
                </div>
              </div>

              <div v-if="msg.content.trim()" class="message-content ai-message">
                <MdPreview :modelValue="msg.content" />
              </div>
            </div>
            <div class="spacer"></div>
          </template>

          <!-- 系统消息 -->
          <template v-else-if="msg.role == 'system'">
            <div class="avatar-container">
              <img :src="aiAvatar" alt="AI头像" class="avatar">
            </div>
            <div class="message-box">
              <div class="message-header">
                <span class="sender-name">智能助手</span>
                <span class="message-time">{{ msg.createTime }}</span>
              </div>
              <div class="message-content ai-message">
                <MdPreview :modelValue="msg.content" />
              </div>
            </div>
            <div class="spacer"></div>
          </template>
        </div>

        <!-- 添加推荐问题区域 -->
        <div v-if="recommendedList.length" class="recommended-questions">
          <div class="questions-title">您可能想问：</div>
          <div class="questions-container">
            <div v-for="(question, index) in recommendedList" :key="index" class="question-item"
              @click="handleQuestionClick(question)">
              {{ question }}
            </div>
          </div>
        </div>
      </div>

      <!-- 输入框区域 -->
      <div class="input-area">
        <div class="input-container">
          <!-- 主输入区域 -->
          <div class="main-input-area">
            <div class="input-wrapper">
              <textarea v-model="userInput" @keydown="handleKeydown" placeholder="有问题，尽管问，shift+enter换行..."
                class="input-textarea" rows="1" ref="textareaRef"> </textarea>

              <!-- 发送按钮 -->
              <button class="send-button" @click="isGenerating ? stopGeneration() : sendMessage()">
                <svg v-if="!isGenerating" class="send-icon" viewBox="0 0 24 24" width="18" height="18">
                  <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" fill="#fff" />
                </svg>
                <svg v-else class="stop-icon" viewBox="0 0 24 24" width="18" height="18">
                  <path d="M6 6h12v12H6z" fill="#fff" />
                </svg>
              </button>
            </div>

            <!-- 功能按钮区 -->
            <div class="features-bar">
              <!-- 深度思考选项 -->
              <div :class="['thinking-option', { active: deepThinking }]" @click="toggleDeepThinking">
                <svg class="feature-icon" viewBox="0 0 24 24" width="16" height="16">
                  <path
                    d="M13.5,7a1.5,1.5,0,0,0,3,0,1.5,1.5,0,0,0-3,0ZM7.5,9A1.5,1.5,0,1,0,9,7.5,1.5,1.5,0,0,0,7.5,9Zm13.62,3.9A7.1,7.1,0,0,0,22,9.45,7.11,7.11,0,0,0,14.9,2.37,7.18,7.18,0,0,0,9.46,5a6.94,6.94,0,0,0-8.09,6.83A7.08,7.08,0,0,0,5.76,18.7v2.67A.63.63,0,0,0,6.39,22H17.61a.63.63,0,0,0,.63-.63V18.7A7.08,7.08,0,0,0,21.12,12.9ZM17,20.74H7V18.05l-.06-.05a5.81,5.81,0,0,1-3.56-5.36A5.71,5.71,0,0,1,8,7.32l.52-.13.11-.52a5.93,5.93,0,0,1,5.69-4.55,5.85,5.85,0,0,1,5.85,5.85,5.89,5.89,0,0,1-1,3.27l-.24.38.24.38a5.82,5.82,0,0,1,1,3.28,5.83,5.83,0,0,1-3.56,5.36l-.06.05Z"
                    fill="currentColor" />
                </svg>
                <span class="feature-text">深度思考</span>
              </div>

              <button class="feature-btn" @click="handleImageUpload" title="上传图片">
                <svg class="feature-icon" viewBox="0 0 1024 1024" width="16" height="16">
                  <path
                    d="M853.333 128H170.667c-47.128 0-85.333 38.205-85.333 85.333v597.333c0 47.128 38.205 85.333 85.333 85.333h682.667c47.128 0 85.333-38.205 85.333-85.333V213.333c0-47.128-38.205-85.333-85.333-85.333zm0 682.667H170.667V213.333h682.667v597.333z"
                    fill="currentColor" />
                  <path
                    d="M362.667 469.333a106.667 106.667 0 1 0 0-213.333 106.667 106.667 0 0 0 0 213.333zM256 725.333h512l-128-170.667-128 128-85.333-42.667z"
                    fill="currentColor" />
                </svg>
                <span class="feature-text">图片上传</span>
              </button>

              <button class="feature-btn" @click="handleVoiceInput" title="语音输入">
                <svg class="feature-icon" viewBox="0 0 1024 1024" width="16" height="16">
                  <path
                    d="M512 640c70.692 0 128-57.308 128-128V256c0-70.692-57.308-128-128-128s-128 57.308-128 128v256c0 70.692 57.308 128 128 128z"
                    fill="currentColor" />
                  <path
                    d="M738.133 512c0-17.673-14.327-32-32-32s-32 14.327-32 32c0 89.6-72.533 162.133-162.133 162.133S349.867 601.6 349.867 512c0-17.673-14.327-32-32-32s-32 14.327-32 32c0 115.627 85.547 211.413 196.267 227.84V832h-85.333c-17.673 0-32 14.327-32 32s14.327 32 32 32h234.667c17.673 0 32-14.327 32-32s-14.327-32-32-32H546.133v-92.16c110.72-16.427 196.267-112.213 196.267-227.84z"
                    fill="currentColor" />
                </svg>
                <span class="feature-text">语音识别</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { listChatSession, createChatSession, updateChatSession, deleteChatSession } from '@/api/chat/session'
import { listChatMessage, createChatMessage, updateChatMessage, deleteChatMessage } from '@/api/chat/message'
import { dialogueSend, dialogueStreamSend } from '@/api/ai/ai'
import { getCurrentDateTime } from '@/utils/dateTime'
import userAvatar from '@/assets/images/user-avatar.png'
import aiAvatar from '@/assets/images/ai-avatar.png'
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import { getLocal } from '~/utils/storage'

const userInfo = ref(getLocal("userInfo"))
const userInput = ref('')
const messages = ref([])
const recommendedList = ref([])
const chatSessionList = ref([])
// 当前会话信息
const currrntChatSession = ref({})
const editingChatId = ref(null)
const editingTitle = ref('')
const editInput = ref(null)
const isGenerating = ref(false)  // 是否正在生成回复
const eventSource = ref(null)  // 存储事件源，用于停止生成
const deepThinking = ref(false)  // 深度思考选项
const textareaRef = ref(null)  // textarea引用
const chatSessionRef = ref(null)  // 聊天区域引用

onMounted(() => {
  getChatSessionList();
  initChat();
})
                                                                                                                                                                                                                                                                                                                                                                                                                                     
// 滚动到底部方法
const scrollToBottom = () => {
  nextTick(() => {
    if (chatSessionRef.value) {
      chatSessionRef.value.scrollTop = chatSessionRef.value.scrollHeight;
    }
  });
}

// 初始化对话
const initChat = async () => {
  if (currrntChatSession.value.sessionId) {
    const res = await listChatMessage({ sessionId: currrntChatSession.value.sessionId });
    messages.value = res.data.map(item => ({
      ...item,
      showReasoning: true
    }));
    recommendedList.value = [];
    // 初始化后滚动到底部
    scrollToBottom();
  } else {
    messages.value = [{
      role: 'system',
      content: '您好！我是智能助手，很高兴为您服务。我可以帮您：\n' +
        '• 回答问题和解决问题\n' +
        '• 编写和优化代码\n' +
        '• 进行文档创作和翻译\n' +
        '• 提供专业领域建议\n\n' +
        '请问有什么我可以帮您的吗？',
      createTime: getCurrentDateTime()
    }];
    recommendedList.value = [
      '如何使用Vue3的组合式API？',
      '帮我优化一段代码',
      '解释一下什么是设计模式？'
    ];
  }
}
// 获取会话列表
const getChatSessionList = async () => {
  const res = await listChatSession({userId: userInfo.value?.userId})
  chatSessionList.value = res.data;
}

// 点击推荐列表
const handleQuestionClick = (question) => {
  userInput.value = question
  sendMessage()
}

const sendMessage = async () => {
  if (!userInput.value.trim()) return
  // 保存当前对话
  if (!currrntChatSession.value.sessionId) {
   await saveChatSession(userInput.value);
  }
  // 清空推荐问题
  recommendedList.value = []
  // 添加用户消息
  messages.value.push({
    role: 'user',
    content: userInput.value,
    createTime: getCurrentDateTime()
  })
  await saveChatMessage(messages.value[messages.value.length - 1]);
  // 清空输入框
  userInput.value = ''
  // 添加AI回复占位消息
  const startTime = Date.now()
  const promptData = [...messages.value]
  messages.value.push({
    role: 'assistant',
    content: '',
    reasoning: '',
    showReasoning: true,
    createTime: getCurrentDateTime()
  })
  const currentMessage = messages.value[messages.value.length - 1]
  currentMessage.remark = "思考中"
  // 开始生成回复
  isGenerating.value = true
  eventSource.value = dialogueStreamSend({
    prompt: promptData,
    onReasoning: (data) => {
      currentMessage.reasoning = currentMessage.reasoning + data;
      scrollToBottom(); // AI思考时滚动到底部
    },
    onMessage: (data) => {
      if (currentMessage.remark == "思考中") {
        currentMessage.remark = `已深度思考(用时${Math.floor((Date.now() - startTime) / 1000)}秒)`
      }
      currentMessage.content = currentMessage.content + data
      scrollToBottom(); // AI回答时滚动到底部
    },
    onRecommended: (data) => {
      recommendedList.value = data
      scrollToBottom(); // 显示推荐问题时滚动到底部
    },
    onError: (err) => {
      messages.value[messages.value.length - 1].content = '抱歉，我遇到了一些问题，请稍后再试。'
      isGenerating.value = false
      scrollToBottom();
    },
    onClose: async () => {
      await saveChatMessage(currentMessage);
      isGenerating.value = false
      scrollToBottom();
    }
  })
}

// 停止生成回复
const stopGeneration = () => {
  if (eventSource.value) {
    eventSource.value.close()
    eventSource.value = null
    isGenerating.value = false

    // 在当前回复后添加一个说明
    const currentMessage = messages.value[messages.value.length - 1]
    if (currentMessage && currentMessage.role === 'assistant') {
      currentMessage.content += '\n\n_[用户已停止生成]_'
      scrollToBottom();
    }
  }
}

// 新增会话
const createNewChat = () => {
  currrntChatSession.value = {}
  initChat()
}

// 保存会话
const saveChatSession = async (title) => {
  const res = await createChatSession({
    title: title.substring(0, 20),
    userId: userInfo.value.userId
  })
  if (res.code == 200) {
    currrntChatSession.value = res.data
    getChatSessionList();
  }
}
// 保存当前对话消息
const saveChatMessage = async (message) => {
  const data = {
    ...message,
    sessionId: currrntChatSession.value.sessionId,
  }
  const res = await createChatMessage(data);
}
// 切换思考内容的显示与隐藏
const toggleReasoning = (index) => {
  if (messages.value[index] && messages.value[index].role === 'assistant') {
    messages.value[index].showReasoning = !messages.value[index].showReasoning
  }
}
const handleChatSession = async (session) => {
  // 如果当前正在编辑，取消编辑
  if (editingChatId.value) {
    cancelEdit()
  }
  currrntChatSession.value = session;
  initChat();
}

// 开始编辑对话名称
const handleEdit = (session) => {
  editingChatId.value = session.sessionId
  // editingTitle.value = currentTitle

  // // 下一帧后聚焦输入框
  // nextTick(() => {
  //   if (editInput.value) {
  //     editInput.value.focus()
  //   }
  // })
}

// 保存编辑后的标题
const editChatSession = () => {
  if (!editingTitle.value.trim()) {
    editingTitle.value = '新对话'
  }

  const chatIndex = chatSessionList.value.findIndex(chat => chat.id === editingChatId.value)
  if (chatIndex !== -1) {
    chatSessionList.value[chatIndex].title = editingTitle.value.trim()
    saveChatHistory()
    ElMessage({
      type: 'success',
      message: '名称已更新',
      duration: 1500
    })
  }

  // 重置编辑状态
  editingChatId.value = null
  editingTitle.value = ''
}

// 取消编辑
const cancelEdit = () => {
  editingChatId.value = null
  editingTitle.value = ''
}

// 处理命令
const handleDelete = (session) => {
  confirmDelete(session.sessionId)
}

// 确认删除对话
const confirmDelete = (sessionId) => {
  ElMessageBox.confirm(
    '确定要删除这个对话吗？此操作不可恢复。',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    deleteChat(sessionId)
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })
}

// 删除对话
const deleteChat = (sessionId) => {
  // const index = chatSessionList.value.findIndex(chat => chat.id === chatId)
  // if (index !== -1) {
  //   chatSessionList.value.splice(index, 1)
  //   saveChatHistory()

  //   // 如果删除的是当前对话，切换到其他对话
  //   if (currentChatId.value === chatId) {
  //     if (chatSessionList.value.length > 0) {
  //       // switchChat(chatSessionList.value[0].id)
  //     } else {
  //       // 如果没有对话了，创建一个新的
  //       createNewChat()
  //     }
  //   }
  // }
}

// 处理键盘事件
const handleKeydown = (event) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault()
    sendMessage()
  }
}

// 处理图片上传（暂时只是占位函数）
const handleImageUpload = () => {
  console.log('图片上传功能待实现')
}

// 处理语音输入（暂时只是占位函数）
const handleVoiceInput = () => {
  console.log('语音输入功能待实现')
}

// 切换深度思考模式
const toggleDeepThinking = () => {
  deepThinking.value = !deepThinking.value
}
</script>

<style lang="scss" scoped>
.app{
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}
// 应用整体样式
.app-container {
  flex: 1;
  display: flex;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: #f8fafc;
  padding: 20px;
  gap: 24px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sidebar {
  width: 280px;
  background: #ffffff;
  border-right: 1px solid #eaecef;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  box-sizing: border-box;

  // AI信息区
  .ai-info {
    display: flex;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eaecef;

    .ai-logo {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      margin-right: 12px;
      object-fit: cover;
    }

    .ai-name {
      font-size: 18px;
      color: #1a1a1a;
      font-weight: 600;
    }
  }

  // 新建对话按钮
  .new-chat-btn {
    padding: 12px;
    margin-bottom: 20px;
    background: #f0f5ff;
    border: 1px solid #e6effb;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #3370ff;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: #e6f0ff;
    }

    .plus-icon {
      font-size: 16px;
      font-weight: normal;
      margin-right: 4px;
    }
  }

  // 历史对话列表
  .session-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    margin-right: -8px;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #e0e0e0;
      border-radius: 2px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    // 历史记录条目
    .session-item {
      padding: 12px;
      margin: 6px 0;
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid #eaecef;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;

      &:hover {
        background: #f5f8ff;
      }

      &.active {
        background: #edf2ff;
        border: 1px solid #d1e0ff;
      }

      .session-item-content {
        flex: 1;
        overflow: hidden;
        padding: 2px 0;

        .chat-title {
          font-size: 14px;
          color: #1a1a1a;
          display: block;
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .more-options {
        opacity: 0;
        transition: opacity 0.2s ease;
        margin-left: 8px;

        .more-icon {
          cursor: pointer;
          padding: 4px 6px;
          border-radius: 4px;

          &:hover {
            background-color: rgba(0, 0, 0, 0.05);
          }
        }
      }

      &:hover .more-options {
        opacity: 1;
      }

      // Element Plus input 样式覆盖
      :deep(.el-input__wrapper) {
        padding: 0 8px;
        box-shadow: 0 0 0 1px #3370ff inset;
        border-radius: 4px;
      }

      :deep(.el-input__inner) {
        height: 28px;
        font-size: 14px;
      }
    }
  }
}

// 弹出菜单样式
.popover-content {
  padding: 4px 0;

  .popover-item {
    padding: 8px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: #f5f8ff;
    }
  }
}

// 覆盖element-plus的popover样式
:deep(.chat-popover) {
  padding: 0;
  min-width: 100px;
}

:deep(.el-popper__arrow) {
  display: none;
}

// 聊天容器
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  position: relative;

  // 聊天历史记录
  .chat-session {
    flex: 1;
    margin-bottom: 12px;
    overflow-y: auto;
    padding: 24px;
    border-radius: 8px;
    background: #ffffff;
    scroll-behavior: smooth;

    .md-editor{
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #e0e0e0;
      border-radius: 2px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    // 消息包装器
    .message-wrapper {
      display: flex;
      margin: 24px 0;
      gap: 16px;
      max-width: 100%;

      &.user-wrapper {
        flex-direction: row;
        justify-content: flex-end;
      }

      &.ai-wrapper {
        flex-direction: row;
        justify-content: flex-start;
      }

      .spacer {
        flex: 1;
        min-width: 20px;
        max-width: 100px;
      }

      .avatar-container {
        flex-shrink: 0;

        .avatar {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          background: #ffffff;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          object-fit: cover;
        }
      }

      .message-box {
        flex: 0 1 auto;
        max-width: 70%;

        &.user-message-box {
          .message-header {
            justify-content: flex-end;
          }
        }

        .message-header {
          display: flex;
          align-items: center;
          margin-bottom: 6px;
          gap: 8px;

          .sender-name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
          }

          .message-time {
            font-size: 12px;
            color: #999;
          }
        }

        // 深度思考区域样式
        .reasoning-container {
          margin-bottom: 10px;

          .reasoning-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f5f7fa;
            border: 1px solid #e8e8e8;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            margin-bottom: 8px;
            transition: all 0.2s ease;
            color: #666;

            &:hover {
              background: #edf2fa;
            }

            .reasoning-title {
              font-weight: 500;
            }

            .arrow-icon {
              width: 12px;
              height: 12px;
              transition: transform 0.3s ease;
              transform: rotate(180deg);

              &.arrow-down {
                transform: rotate(0);
              }
            }
          }

          .reasoning-content {
            background: #f9f9f9;
            border: 1px solid #e8e8e8;
            padding: 12px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 10px;
            color: #555;
            overflow-wrap: break-word;
          }
        }

        .message-content {
          font-size: 15px;
          line-height: 1.6;
          padding: 12px 16px;
          border-radius: 12px;
          position: relative;
          margin-bottom: 4px;
          color: #333;
          word-break: break-word;

          &.user-message {
            background: #edf6ff;
            color: #0066cc;
            border-top-right-radius: 4px;
          }

          &.ai-message {
            background: #f9f9f9;
            color: #333;
            border-top-left-radius: 4px;
          }
        }
      }
    }

    // 推荐问题区域
    .recommended-questions {
      margin-top: 24px;
      padding: 16px;
      background: #f9f9f9;
      border-radius: 12px;

      .questions-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 12px;
      }

      .questions-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .question-item {
          padding: 8px 16px;
          background: #fff;
          border: 1px solid #e0e0e0;
          border-radius: 16px;
          font-size: 14px;
          color: #333;
          cursor: pointer;
          transition: all 0.2s;

          &:hover {
            background: #edf6ff;
            border-color: #3370ff;
            color: #3370ff;
          }
        }
      }
    }
  }

  // 输入区域
  .input-area {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    background: #fff;

    .input-container {
      display: flex;
      align-items: flex-end;
      max-width: 1200px;
      margin: 0 auto;

      .main-input-area {
        flex: 1;
        display: flex;
        flex-direction: column;

        .input-wrapper {
          flex: 1;
          background: #ffffff;
          border: 1px solid #e0e6ed;
          border-radius: 12px;
          padding: 8px 12px;
          transition: all 0.2s ease;
          display: flex;
          align-items: center;
          min-height: 44px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);

          .input-textarea {
            width: 100%;
            padding: 4px 0;
            border: none;
            background: transparent;
            font-size: 15px;
            resize: none;
            outline: none;
            max-height: 120px;
            min-height: 24px;
            color: #333;
            line-height: 1.5;

            &::placeholder {
              color: #999;
            }
          }

          .send-button {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #3370ff 0%, #2860ff 100%);
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-left: 8px;
            box-shadow: 0 2px 6px rgba(51, 112, 255, 0.25);

            &:hover {
              background: linear-gradient(135deg, #2860ff 0%, #1a50e8 100%);
              box-shadow: 0 4px 10px rgba(51, 112, 255, 0.35);
            }

            &:active {
              box-shadow: 0 2px 4px rgba(51, 112, 255, 0.2);
            }

            .send-icon,
            .stop-icon {
              width: 20px;
              height: 20px;
              filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
            }
          }
        }

        .features-bar {
          display: flex;
          align-items: center;
          padding: 8px 4px;
          margin-top: 8px;
          gap: 10px;

          .thinking-option {
            display: flex;
            align-items: center;
            padding: 6px 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-right: 0;
            border: 1px solid #e9ecef;
            background-color: #ffffff;

            &:hover {
              background-color: #f0f5ff;
              border-color: #d1e0ff;
            }

            &.active {
              background-color: #edf2ff;
              border-color: #b4d0ff;
              color: #3370ff;

              .feature-text,
              .feature-icon {
                color: #3370ff;
              }

              .feature-text {
                font-weight: 500;
              }
            }

            .feature-icon {
              width: 16px;
              height: 16px;
              margin-right: 4px;
              color: #6c757d;
            }

            .feature-text {
              font-size: 13px;
              color: #6c757d;
              white-space: nowrap;
            }
          }

          .feature-btn {
            display: flex;
            align-items: center;
            padding: 6px 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            background: #ffffff;
            border: 1px solid #e9ecef;
            margin-right: 0;

            &:hover {
              background-color: #f0f5ff;
              border-color: #d1e0ff;
            }

            .feature-icon {
              width: 16px;
              height: 16px;
              margin-right: 4px;
              color: #6c757d;
            }

            .feature-text {
              font-size: 13px;
              color: #6c757d;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}

// 响应式设计
    @media (max-width: 768px) {
  .sidebar {
    display: none;
  }

  .app-container {
    padding: 12px;
  }

  .chat-container {
    border-radius: 0;

    .chat-session {
      padding: 16px;

      .message-wrapper {
        margin: 16px 0;
        gap: 12px;

        .spacer {
          min-width: 10px;
          max-width: 50px;
        }

        .message-box {
          max-width: 80%;
        }
      }
    }

    .input-area {
      padding: 12px;

      .input-container {
        .main-input-area {
          .input-wrapper {
            min-height: 40px;
            padding: 6px 10px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);

            .send-button {
              width: 34px;
              height: 34px;

              .send-icon,
              .stop-icon {
                width: 18px;
                height: 18px;
              }
            }
          }

          .features-bar {
            padding: 6px 2px;

            .thinking-option,
            .feature-btn {
              padding: 4px 8px;
              margin-right: 8px;

              .feature-text {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
</style>